<template>
    <div class="search">
        <a-config-provider :locale="params.zhCN">

            <div v-for="(item,index) in params.list" :key="index" class="item">
                <div class="text">{{ item.name }}：</div>
                <a-input v-if="item.type === 'input'" v-model:value="item.val" style="width: 100%" type="text" allowClear/>
                <a-select v-if="item.type === 'select'" show-search :mode="item.mode" v-model:value="item.val" style="width: 100%" allowClear>
                    <a-select-option v-for="(demo,idx) in item.data" :key="idx" :value="demo.id">{{ demo.name }}
                    </a-select-option>
                </a-select>
                <a-range-picker v-if="item.type === 'picker'" v-model:value="item.val" :locale="params.zhCN" style="width: 100%"
                                value-format="YYYY-MM-DD" :placeholder="['开始时间','结束时间']" allowClear/>
                <div class="maxMin" v-if="item.type === 'maxMin'">
                    <a-input v-model:value="item.val" allowClear style="width: 47%"></a-input>
                    -
                    <a-input v-model:value="item.val1" allowClear style="width: 47%"></a-input>
                </div>
            </div>
        </a-config-provider>
        <div style="margin-left: auto">
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button style="margin-left: 12px" @click="reset">重置</a-button>
        </div>
    </div>
</template>
<script setup>
import {reactive, onMounted} from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
const props = defineProps(['data'])
const emit = defineEmits(['search'])
const params = reactive({
    list: [],
    zhCN
})
onMounted(() => {
    params.list = props.data
})
const search = () => {
    let obj = {}
    params.list.map(item => {
        if (item.type === 'picker') {
            obj[item.key[0]] = item.val[0]
            obj[item.key[1]] = item.val[1]
        } else if (item.type === 'maxMin') {
            console.log(item,'item')
            obj[item.key[0]] = item.val
            obj[item.key[1]] = item.val1
        } else {
            obj[item.key] = item.val
        }
    })
    for (let item in obj) {
        if (!obj[item] && obj[item] !== 0) delete obj[item]
    }
    emit('search', obj)
}
const reset = () => {
    params.list.map(item => {
        if (item.type === 'picker' || item.mode) {
            item.val = []
        } else {
            item.val = ''
        }
    })
    emit('search', {})
}
const onRangeChange = (e, s, demo) => {
    // params.startTime = s
    params.list.map(item => {
        if (item.name === demo.name) item.val = s
    })
    // console.log(s,item)
}
</script>
<style scoped lang="less">
.search {
    display: flex;
    flex-wrap: wrap;

    .item {
        width: 25%;
        margin-bottom: 12px;
        display: flex;
        padding: 0 10px;
        align-items: center;
        white-space: nowrap;

        .maxMin {
            width: 100%;

            .ant-input {
                width: 48%;
            }
        }

        .text {
            width: 110px;
        }
    }
}
</style>
